<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>鼠标移动让文字出现🌈效果</title>

	<style type="text/css">
		html {
			color: black;
			font-family: sans-serif;
		}

		body {
			margin: 0;
		}

		.hero {
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			color: black;
		}

		h1 {
			text-shadow: 10px 10px 0 rgba(0,0,0,1);
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div class="hero">
		<h1 contenteditable>🔥WOAH!</h1>
	</div>

	<script type="text/javascript">
		const hero = document.querySelector(".hero");
		const text = hero.querySelector('h1');
		const walk = 500;

		function shadow (e) {
			const {'offsetWidth': width, 'offsetHeight': height} = hero;
			let {'offsetX': x, 'offsetY': y} = e;

			console.log(width);
			console.log(height);
			console.log(x);
			console.log(y);

			if(this !== e.target) {
				x = x + e.target.offsetLeft;
				y = y + e.target.offsetTop;
			}

			const xWalk = Math.round((x / width * walk) - (walk / 2));
			const yWalk = Math.round((y/ height * walk) - (walk / 2));

			text.style.textShadow = `
				${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
				${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
				${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
				${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
			`;
		}

		hero.addEventListener('mousemove', shadow);
	</script>
</body>
</html>